<template>
	<h2>reactive的使用</h2>
	<h3>姓名：{{ user.name }}</h3>
	<h3>年龄：{{ user.age }}</h3>
	<h3>性别：{{ user.gender }}</h3>
	<h3>妻子：{{ user.wife }}</h3>
	<hr />
	<button @click="updateUser">更新数据</button>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue"

export default defineComponent({
	name: "App",
	// 需求:显示用户的相关数据，点击按钮，可以更新用户的相关信息数据
	/*
		作用: 定义多个数据的响应式
		const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
		响应式转换是“深层的”：会影响对象内部所有嵌套的属性
		内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
	*/

	setup() {
		// const obj: any = { // 为了在添加obj.gender = '男'不报错！
		const obj: any = {
			name: "小明",
			age: 20,
			wife: {
				name: "小甜甜",
				age: 18,
				cars: ["奔驰", "宝马", "劳斯莱斯"]
			}
		}
		// 把复杂数据变成响应式数据
		const user = reactive<any>(obj)
		console.log(user)

		const updateUser = () => {
			// user.name = "小赵"
			// user.age += 2
			// user.wife.name = "大甜甜"
			// user.wife.cars[0] = "玛莎拉蒂"
			// user对象就是代理对象--- obj对象就是目标对象
			// user对象或者obj对象添加一个新的属性，哪一种方式会影响界面的更新
			// obj.gender = "男" // 这种方式页面不能更新渲染
			// user.gender = "男" // 这种方式页面可以更新渲染，而且这种方式也可以添加到obj上面去
			// user对象或者obj独享中移除一个属性，哪一种会影响界面的更新
			// delete obj.age //这个界面没有更新渲染，但是obj中也没有目标对象
			delete user.age // 界面更新渲染，obj中也一样
		}

		return {
			user,
			updateUser
		}
	}
})
</script>
